$(function(){
    // 点击筛选按钮折叠打开功能
    // let flag=true
    $('#filter').on('click',function(){
        let flag=$('.close').css('display')
        // console.log(flag);
      if(flag=='none'){
          $('.close').show()
          $('.btn-filter .arrow').css('transform','rotate(-90deg)')
      }
    else{
        $('.close').hide()
        $('.arrow').css('transform','rotate(90deg)') 
    }
    
    })

    // 筛选功能
    var dataobj = [
        {
         catagroy1: '全部 热血',
         address: '全部 日本',
         state: '全部 完结',
         free: '全部 免费',
         image: './images/cate-images/cate1.jpg@200w.jpg',
         title: '鬼灭之刃',
         humanmath: '200',
        },
        {
         catagroy1: '全部 古风',
         address: '全部 大陆',
         state: '全部 连载',
         free: '全部 免费',
         title: '天官赐福',
         image: './images/cate-images/cate2.jpg',
         humanmath: '101',
        },
        {
         catagroy1: '全部 热血',
         address: '全部 日本',
         state: '全部 连载',
         free: '全部 付费',
         image: './images/cate-images/cate3.jpg',
         title: '咒术回站',
         humanmath: '102',
        },
        {
         catagroy1: '全部 热血',
         address: '全部 日本',
         state: '全部 连载',
         free: '全部 付费',
         image: './images/cate-images/cate4.jpg',
         title: '一拳超人',
         humanmath: '103',
        },
        {
         catagroy1: '全部 青春',
         address: '全部 日本',
         state: '全部 连载',
         free: '全部 免费',
         image: './images/cate-images/cate5.jpg',
         title: '辉夜大小姐',
         humanmath: '104',
        },
        {
         catagroy1: '全部 悬疑',
         address: '全部 日本',
         state: '全部 连载',
         free: '全部 免费',
         image: './images/cate-images/cate6.jpg',
         title: '幽冥鬼将',
         humanmath: '105',
        },
        {
         catagroy1: '全部 玄幻',
         address: '全部 大陆',
         state: '全部 连载',
         free: '全部 免费',
         image: './images/cate-images/cate7.jpg',
         title: '幽冥鬼将',
         humanmath: '109',
        },
        {
         catagroy1: '全部 玄幻',
         address: '全部 大陆',
         state: '全部 连载',
         free: '全部 免费',
         image: './images/cate-images/cate8.jpg',
         title: '百炼成神',
         humanmath: '120',
        },
        {
         catagroy1: '全部 玄幻',
         address: '全部 日本',
         state: '全部 连载',
         free: '全部',
         image: './images/cate-images/cate9.jpg',
         title: '入间同学入魔了',
         humanmath: '140',
           },
          ]

          renderData(dataobj)
        

        //最上面的筛选
        $('.row-one').on('click','a',function(){
            $(this).addClass('active').siblings('a').removeClass('active')
            let catagroy1=$('.row-one .active').html()
            let address=$('.row-two .active').html()
            let state=$('.row-three .active').html()
            let free=$('.row-four .active').html()
           let newArr= filter(catagroy1,address,state,free)
           renderData(newArr)
        })


        // 地址筛选
        $('.row-two').on('click','a',function(){
            $(this).addClass('active').siblings('a').removeClass('active')
            let catagroy1=$('.row-one .active').html()
            let address=$('.row-two .active').html()
            let state=$('.row-three .active').html()
            let free=$('.row-four .active').html()
           let newArr= filter(catagroy1,address,state,free)
           renderData(newArr)
        })

        // 状态筛选
        $('.row-three').on('click','a',function(){
            $(this).addClass('active').siblings('a').removeClass('active')
            let catagroy1=$('.row-one .active').html()
            let address=$('.row-two .active').html()
            let state=$('.row-three .active').html()
            let free=$('.row-four .active').html()
           let newArr= filter(catagroy1,address,state,free)
           renderData(newArr)
        })

          // 付费筛选
          $('.row-four').on('click','a',function(){
            $(this).addClass('active').siblings('a').removeClass('active')
            let catagroy1=$('.row-one .active').html()
            let address=$('.row-two .active').html()
            let state=$('.row-three .active').html()
            let free=$('.row-four .active').html()
           let newArr= filter(catagroy1,address,state,free)
           renderData(newArr)
        })

        // 渲染的函数
        function renderData(arr){
            let htmlStr=template('ple-data',{data:arr})
            $('.main ul').html(htmlStr)
        }


       // 筛选的函数
        function filter(catagroy1,address,state,free){
        let newArr=dataobj.filter(function(value){
            // console.log(value);
            let bool=value.catagroy1.includes(catagroy1)
            let bool1=value.address.includes(address)
            let bool2=value.state.includes(state)
            let bool3=value.free.includes(free)
            return bool&&bool1&&bool2&&bool3
        })
        return newArr

        }
       



})